/** 
 * https://www.npmjs.com/package/x-data-spreadsheet
 * https://hondrytravis.github.io/x-spreadsheet-doc/
 * https://github.com/SheetJS/sheetjs/tree/master/demos/xspreadsheet#saving-data
 
 * https://github.com/SheetJS/sheetjs

 */
<template>
  <div>
    <input type="file"
           @change="importExcel" />
    <button @click="exportExcel">导出</button>
    <div id="demo"></div>
  </div>
</template>
<script>
import Spreadsheet from "x-data-spreadsheet";
import zhCN from 'x-data-spreadsheet/dist/locale/zh-cn';
import XLSX from 'xlsx'
export default {
  components: {},
  data () {
    return {
      spreadsheet_obj: null
    };
  },
  methods: {
    // 导出!
    xtos (sdata) {
      var out = XLSX.utils.book_new();
      sdata.forEach(function (xws) {
        var aoa = [[]];
        var rowobj = xws.rows;
        for (var ri = 0; ri < rowobj.len; ++ri) {
          var row = rowobj[ri];
          if (!row) continue;
          aoa[ri] = [];
          Object.keys(row.cells).forEach(function (k) {
            var idx = +k;
            if (isNaN(idx)) return;
            aoa[ri][idx] = row.cells[k].text;
          });
        }
        var ws = XLSX.utils.aoa_to_sheet(aoa);
        XLSX.utils.book_append_sheet(out, ws, xws.name);
      });
      return out;
    },
    // 导入
    stox (wb) {
      var out = [];
      wb.SheetNames.forEach(function (name) {
        var o = { name: name, rows: {} };
        var ws = wb.Sheets[name];
        var aoa = XLSX.utils.sheet_to_json(ws, { raw: false, header: 1 });
        aoa.forEach(function (r, i) {
          var cells = {};
          r.forEach(function (c, j) { cells[j] = ({ text: c }); });
          o.rows[i] = { cells: cells };
        })
        out.push(o);
      });
      return out;
    },
    importExcel (e) {
      var files = e.target.files
      if (files.length) {
        var f;
        f = files[0]
        var reader = new FileReader();
        reader.onload = (e) => {
          var data = new Uint8Array(e.target.result);
          var workbook = XLSX.read(data, { type: 'array' });
          console.log(workbook)
          Spreadsheet.locale('zh-cn', zhCN);
          this.spreadsheet_obj = new Spreadsheet("#demo")
            .loadData(this.stox(workbook))
        };
        reader.readAsArrayBuffer(f);
      }
    },
    exportExcel () {
      console.log(this.spreadsheet_obj.getData())
      var new_wb = this.xtos(this.spreadsheet_obj.getData());
      console.log('new_wb', new_wb)
      XLSX.writeFile(new_wb, "SheetJS.xlsx");
    }
  },
  created () { },
  mounted () {
    // var url = "http://192.168.58.113:9091/aizzb-api//file/downloadFile/5f277a103e7e6188edb10c46.xlsx";

    // var req = new XMLHttpRequest();
    // req.open("GET", url, true);
    // req.responseType = "arraybuffer";

    // req.onload = (e) => {
    //   var data = new Uint8Array(req.response);
    //   var workbook = XLSX.read(data, { type: "array" });
    //   Spreadsheet.locale('zh-cn', zhCN);
    //   this.spreadsheet_obj = new Spreadsheet("#demo")
    //     .loadData(this.stox(workbook))
    // }
    // req.send();
  },
  computed: {},
  watch: {}
}
</script>

<style scoped>
#demo {
  width: 1000px;
  height: 1000px;
}
</style>